<template>
    <div class="qilin-pdfView">
        <div class="qilin-pdfView-operate">
            <div class="qilin-pdfView-operate-big">
                <i class="el-icon-plus" @click="scaleD"></i>
            </div>
            <div class="qilin-pdfView-operate-small">
                <i class="el-icon-minus" @click="scaleX"></i>
            </div>
            <!-- <div class="qilin-pdfView-operate-prev" @click="prePage">上一页</div>
            <div class="qilin-pdfView-operate-next" @click="nextPage">下一页</div> -->
        </div>
        <div class="qilin-pdfView-container" :style="{width:pdf_div_width,margin:'0 auto'}">
            <canvas v-for="item in pdf_pages" :key="item" :id="'the_canvas'+item"></canvas>
        </div>
    </div>
</template>
<script>
var PDFJS = require("pdfjs-dist/es5/build/pdf.js");
import workerSrc from "pdfjs-dist/es5/build/pdf.worker.entry";
PDFJS.GlobalWorkerOptions.workerSrc = workerSrc;
export default {
    name: "pdfView",
    props: {
        data: ArrayBuffer,
    },
    data() {
        return {
            pdf_scale: 1.0, //pdf放大系数
            pdf_pages: [],
            pdf_div_width: "",
            currentPage: 1
        };
    },
    methods: {
        scaleD() {
            //放大
            let max = 0;
            if (window.screen.width > 1440) {
                max = 1.4;
            } else {
                max = 1.2;
            }
            if (this.pdf_scale >= max) {
                return;
            }
            this.pdf_scale = this.pdf_scale + 0.1;
            this.loadFile();
        },
        scaleX() {
            //缩小
            let min = 1.0;
            if (this.pdf_scale <= min) {
                return;
            }
            this.pdf_scale = this.pdf_scale - 0.1;
            this.loadFile();
        },
        // 初始化pdf
        async loadFile() {
            this.pdfDoc = await PDFJS.getDocument(this.data).promise;
            this.pdf_pages = this.pdfDoc.numPages;
            this.$nextTick(() => this.renderPage());
        },
        async renderPage(num = 1) {
            this.currentPage = num;
            const page = await this.pdfDoc.getPage(num);
            const canvas = document.getElementById("the_canvas" + num);
            // const canvas = document.getElementById("the_canvas");
            const ctx = canvas.getContext("2d");
            const dpr = window.devicePixelRatio || 1;
            const bsr =
                ctx.webkitBackingStorePixelRatio ||
                ctx.mozBackingStorePixelRatio ||
                ctx.msBackingStorePixelRatio ||
                ctx.oBackingStorePixelRatio ||
                ctx.backingStorePixelRatio ||
                1;
            const ratio = dpr / bsr;
            const viewport = page.getViewport({ scale: this.pdf_scale });
            canvas.width = viewport.width * ratio;
            canvas.height = viewport.height * ratio;
            canvas.style.width = viewport.width + "px";
            this.pdf_div_width = viewport.width + "px";
            canvas.style.height = viewport.height + "px";
            ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
            const renderContext = {
                canvasContext: ctx,
                viewport: viewport,
            };
            page.render(renderContext);
            if (this.pdf_pages > num) {
                setTimeout(() => {
                    return this.renderPage(num + 1);
                });
            }
        },
        nextPage() {
            console.log(this.pdf_pages,this.currentPage);
            if (this.pdf_pages > this.currentPage) {
                this.renderPage(this.currentPage + 1);
            }
        },
        prePage() {
            console.log(this.pdf_pages,this.currentPage);
            if (this.currentPage > 1) {
                this.renderPage(this.currentPage - 1);
            }
        },
    },
    mounted() {
        this.loadFile();
    },
};
</script>
<style lang="less" scoped>
.qilin-pdfView {
    width: 100%;
    height: 100%;
    > .qilin-pdfView-operate {
        position: fixed;
        display: flex;
        z-index: 20;
        bottom: 15%;
        right: 20%;
        cursor: pointer;
        i {
            font-size: 24px;
            margin-right:10px;
        }
    }
}
</style>